<template>
	<div :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';

export default {
	props: {
		height:{
			type:String,
			default:'70px'
		},
		width:{
			type:String,
			default:'100%'
		},
		color:{
            type:Array,
            default:[
                {
                    areaStyle: ['rgba(16,97,204, 0.3)','rgba(17,235,210, 0.1)'],
                    itemStyle: ['rgba(16,97,204, 0.3)','rgba(17,235,210, 0.1)'],
                },{
                    areaStyle: ['rgba(205,52,42, 0.5)','rgba(235,235,21,1)'],
                    itemStyle: ['rgba(205,52,42, 0.5)','rgba(235,235,21,1)']
                }
            ]
        }
	},
	data() {
		return {
			chart:{}
		};
	},
	watch:{
		data(){
			this.init()
		}
	},
	methods:{
		init(){
            this.chart = echarts.init(this.$el);

            let option = {
                legend: {
                    top: "6",
                    right: '4%',
                    itemHeight: 15,
                    itemWidth: 24,
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 18,
                        lineHeight: 16,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '0',
                    top: '35',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },

                    axisTick: {
                        show: false
                    },
                    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                }, ],
                yAxis: [{
                    minInterval: 50,
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ["rgba(0,0,255,0.1)", "rgba(0,0,255,0.1)"]
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#1e2f86'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 18
                        },
                        formatter: function(value) {
                            return value && (value
                                .toString().indexOf('.') != -1 ? value.toString().replace(/(\d)(?=(\d{3})+\.)/g, function($1, $2) {
                                    return $2 + ",";
                                }) : value.toString().replace(/(\d)(?=(\d{3})+\b)/g, function($1, $2) {
                                    return $2 + ",";
                                }));
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                }],
                series: [{
                    name: '受理项目情况',
                    type: 'line',
                    smooth: true,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#d122fd'
                            }, {
                                offset: 1,
                                color: '#9320ff'
                            }]),
                        },
                    },
                    lineStyle: {
                        shadowBlur: 5,
                        shadowColor: 'rgba(0,0,0,0.5)',
                        shadowOffsetY: -3,
                        shadowOffsetX: 3
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(162,76,245,1)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(49,32,170,0.3)'
                        }]),
                    },
                    data: [100, 125, 150, 189, 150, 110, 100, 120, 140, 140, 125, 145],
                    z: 2
                }, {
                    name: '开标项目情况',
                    type: 'line',
                    smooth: true,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#1ddcff'
                            }, {
                                offset: 1,
                                color: '#0970f0'
                            }]),
                        },
                    },
                    lineStyle: {
                        shadowBlur: 5,
                        shadowColor: 'rgba(0,0,0,0.5)',
                        shadowOffsetY: -3,
                        shadowOffsetX: 3
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(29, 220, 255, 1)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(9,112,240,0.3)'
                        }]),
                    },
                    data: [140, 125, 100, 110, 120, 125, 175, 125, 100, 75, 80, 95],
                    z: 1
                }, {
                    name: '成交项目情况',
                    type: 'line',
                    smooth: true,
                    symbolSize: 1,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#fff120'
                            }, {
                                offset: 1,
                                color: '#ffd91a'
                            }]),
                        },
                    },
                    lineStyle: {
                        shadowBlur: 5,
                        shadowColor: 'rgba(0,0,0,0.5)',
                        shadowOffsetY: -3,
                        shadowOffsetX: 3
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(56, 87, 100, 1)'
                        }, {
                            offset: 0.8,
                            color: 'rgba(50,90,100,0.3)'
                        }]),
                    },
                    data: [80, 95, 100, 90, 123, 125, 145, 111, 80, 135, 60, 95],
                    z: 1
                }]
            };

            this.chart.setOption(option);

            window.addEventListener("resize", () => {
                this.chart.resize();
            });

            var index = 0; //播放所在下标
            let this_ = this;
            setInterval(function() {
                this_.chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index
                });
                index++;
                if (index > 11) {
                    index = 0;
                }
            }, 1000);
		}
	},
	mounted() {
        setTimeout(() => {
			this.init()
		}, 20)
	},
};
</script>

<style scoped lang="less">
</style>
